<!-- 层叠性：计算权重
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

CSS像艺术家一样优雅，像工程师一样严谨。

我们来看一个例子，就知道什么叫层叠性了。 -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
           /* 1个id选择器， 1个类选择器， 1个标签选择器  记作 1，1，1 */ 
       #box1 .hezi2 p{   
        color: red;
       }

        /* 1个id选择器， 1个类选择器， 1个标签选择器  记作 1，1，1  */ 
      #box2 div .pp{   
        color: blue;
       }


    </style>
</head>
<body>
    <!-- 第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准 -->
    <div class="hezi1" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                 <div class="hezi4" id="box4">
                    <p class="pp">
                        猜猜我是什么颜色？
                    </p>
                 </div>
            </div>
        </div>
    </div>
</body>
</html>